<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="http://www.qlcoder.com/uploads/145620041535888.png" type="image/x-icon" rel=icon>
    <title>task名字</title>
    <link rel="stylesheet" href="http://www.qlcoder.com/css/edit/editormd.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body class="html-margin">
<div class="q_warp">
    <!-- header s-->
    <header id="ql-header">
        <div class="head-warp clear">
            <div class="logo fl">
                <a href="/home" class="tag"><img src="img/logo.png" alt="logo"></a>
            </div>
            <div class="nav-list fl">
                <div class="nav-list-item fl active"><a href="/home">技能树</a></div>
                <div class="nav-list-item fl"><a href="/topic/index">话题</a></div>
                <div class="nav-list-item fl"><a href="/rank">排行榜</a></div>
                <div class="nav-list-item fl"><a href="/help">帮助中心</a></div>
                <div class="nav-list-item fl"><a href="/review">审核</a></div>
            </div>
            <div class="pull-right ">
                <ul class="avator pull-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle pull-left" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">
                            <img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif"
                                 class="img-circle" alt="cinque terre">
                            <span class="username">端着木鱼敲代码</span>
                            <span class="down"></span>
                        </a>
                        <!--<span class="badge s_tip">4</span>-->
                        <ul class="dropdown-menu ">
                            <li><a href="/profile/792c" target="_blank"><i class="iconfont icon-home"></i>我的主页</a></li>
                            <li><a href="/u/update" target="_blank"><i class="iconfont icon-shezhi"></i>设置</a></li>
                            <li><a href="/imglib" target="_blank"><i class="iconfont icon-iconimg"></i>图片库</a></li>
                            <li><a href="/talent" target="_blank"><i class="iconfont icon-target"></i>offer</a></li>
                            <li><a href="/inbox" target="_blank"><i class="iconfont icon-sixin"></i>私信</a></li>
                            <!--<li role="separator" class="divider"></li>-->
                            <li><a href="/logout" target="_blank"><i class="iconfont icon-kaiguan"></i>退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!--  header e -->

    <!-- contain s -->
    <div class="contain">
        <div class="ql-warp clearfix">
            <div class="ql-left fl">
                <div class="ql-apart">
                    <div class="task-wrap">
                        <div class="task-header mb20">
                            <div class="task-title inline">豆瓣评分爬取</div>
                            <div class="task-score fr">1.98
                                <small>积分</small>
                            </div>
                        </div>
                        <div class="task-content">
                            <p>Google，Baidu的两大技术：爬虫和搜索。爬虫负责抓取整个互联网的内容，搜索负责生成索引供用户检索。所以爬虫算是这两个公司的看家本领了。</p>
                            <p>但是Google和Baidu的爬虫技术是不公开的，算是商业机密了。所以360搜索刚起步的时候第一件事就是挖百度的核心搜索爬虫组的程序员，基本是3倍工资起挖(跪求360公司来辟谣)。</p>
                            <p>虽然没办法知道这两家公司的爬虫技术，但是我们可以通过开源项目来学习。比如<a href="http://scrapy.org/">Scrapy</a>就是一个非常优秀开源的爬虫框架，如果对爬虫有兴趣的话可以深入学习该框架。
                            </p>
                            <p>简单地讲，爬虫分为两个步奏：</p>
                            <ol>
                                <li><p>把页面源码下载下来</p></li>
                                <li><p>解析下载下来的页面，得到我们想要的数据</p></li>
                            </ol>
                            <p>在第一步中，可能会需要登录，需要绕开网站的反爬虫机制等等。在第二步中则需要使用XPath、CSS Selector、正则表达式等工具来进行解析。</p>
                            <p>这里通过一个非常简单的任务来让大家感受一下爬虫：</p>
                            <p><a href="https://movie.douban.com/top250">豆瓣电影Top250</a>收录了至今为止，大家最喜欢的250部电影。</p>
                            <p>该列表呈现了每部电影的评分，年份等基本信息。</p>
                            <p>这题的答案很简单，就是这个榜单的前166部电影的评分总和。</p>
                            <p>举例：</p>
                            <p>目前排第一的《肖申克的救赎》是9.6分，第二的《这个杀手不太冷》是9.4分，第三的《阿甘正传》是9.4分。</p>
                            <p>那么前3部电影的总分为<code>9.6+9.4+9.4=28.4</code>。</p>
                        </div>
                    </div>
                </div>
                <!-- comment -->
                <div class="comment-wrap mt30">
                    <div class="comment-main">
                        <div class="edit empty" contenteditable="true" aria-label="说点什么吧^_^:"></div>
                        <div class="command none">
                            <a href="javascript:;" class="commentBtn fr">回复</a>
                            <a href="javascript:;" class="cancel">取消</a>
                        </div>
                    </div>
                </div>
                <div class="comment-list mt30">
                    <div class="media" id="">
                        <!-- media avatar s-->
                        <div class="comment-avatar fl">
                            <a href="" class="comment-user-avatar">
                                <img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" alt="">
                            </a>
                        </div>
                        <!-- media avatar e-->
                        <!-- media content s-->
                        <div class="comment-body inline">
                            <a href="/profile/d0c8" class="comment-username qlUser">阿粥</a>
                            <div class="ql-popover bottom">
                                <div class="namecard-main"><img src="http://www.qlcoder.com/system/App/User/avatars/000/001/506/thumb/晴天娃娃.jpg" alt="">
                                    <div class="namecard-name">dploop</div>
                                    <div class="namecard-job">某西南偏远三流野鸡公司</div>
                                    <div class="namecard-numbers clearfix">
                                        <div class="szan"><span>排名</span><span class="num">4</span></div>
                                        <div class="vertical"></div>
                                        <div class="slike"><span>积分</span><span class="num">3135</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment-content">
                                一直在算250个的值，然后都要哭了为什么答案不对……再一看，前166部 ==
                            </div>
                            <div class="operate inline mb10">
                                <span class="when">2016-09-26 </span>
                                <a href="javascript:;" class="commentOtherBtn">回复</a>
                                <a href="javascript:;" class="delcomment">删除</a>
                            </div>
                            <div class="comment-main none">
                                <div class="edit empty" contenteditable="true" aria-label="写下你的评论..."></div>
                                <div class="command none">
                                    <a href="javascript:;" class="commentBtn fr">回复</a>
                                    <a href="javascript:;" class="cancel">取消</a>
                                </div>
                            </div>
                        </div>
                        <!-- media content s-->

                    </div>
                    <div class="media" id="">
                        <!-- media avatar s-->
                        <div class="comment-avatar fl">
                            <a href="" class="comment-user-avatar">
                                <img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" alt="">
                            </a>
                        </div>
                        <!-- media avatar e-->
                        <!-- media content s-->
                        <div class="comment-body inline">
                            <a href="/profile/d0c8" class="comment-username qlUser">阿粥</a>
                            <div class="ql-popover bottom">
                                <div class="namecard-main"><img src="http://www.qlcoder.com/system/App/User/avatars/000/001/506/thumb/晴天娃娃.jpg" alt="">
                                    <div class="namecard-name">dploop</div>
                                    <div class="namecard-job">某西南偏远三流野鸡公司</div>
                                    <div class="namecard-numbers clearfix">
                                        <div class="szan"><span>排名</span><span class="num">4</span></div>
                                        <div class="vertical"></div>
                                        <div class="slike"><span>积分</span><span class="num">3135</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment-content">
                                一直在算250个的值，然后都要哭了为什么答案不对……再一看，前166部 ==
                            </div>
                            <div class="operate inline mb10">
                                <span class="when">2016-09-26 </span>
                                <a href="javascript:;" class="commentOtherBtn">回复</a>
                                <a href="javascript:;" class="delcomment">删除</a>
                            </div>
                            <div class="comment-main none">
                                <div class="edit empty" contenteditable="true" aria-label="写下你的评论..."></div>
                                <div class="command none">
                                    <a href="javascript:;" class="commentBtn fr">回复</a>
                                    <a href="javascript:;" class="cancel">取消</a>
                                </div>
                            </div>
                        </div>
                        <!-- media content s-->

                    </div>

                </div>

            </div>
            <div class="ql-right fl">
                <div class="task-writer-wrap">
                    <div class="task-writer-header bor_b pb20">
                        <div class="task-writer-avatar fl">
                            <img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" alt="">
                        </div>
                        <div class="task-writer-info">
                            <div class="task-writer-name">吴永巍<span class="type">题主</span></div>
                            <div class="task-writer-company"><i class="icon icon-company"></i>百度 网页搜索部 架构师</div>
                            <div class="task-writer-position"><i class="icon icon-pos"></i>北京市 朝阳</div>
                        </div>
                    </div>
                    <div class="task-writer-apart bor_b">
                        <div class="task-writer-h2 mb10">吴永巍说:</div>
                        <div class="task-writer-content">
                            360刚起步的时候，爬虫的效率很低，导致对被爬的网站负担很大。有次我正在吃夜宵，运维组的哥们电话打给我：“哥们快回来！我们被DDoS攻击了！”赶紧上线查日志，发现360的爬虫在我们网站的一些动态页面死循环了。连忙打电话给360，但还是挂了1个月的KPI……360还钱！
                        </div>
                    </div>
                    <div class="task-writer-apart bor_b">
                        <div class="task-writer-h2 mb10">奖励规则</div>
                        <div class="task-write-content">
                            <p>首个通关的coder奖励顶配mac一台。(mac官网macbook系列任选)</p>
                        </div>
                        <a href="" data-toggle="modal" data-target="#myModal" class="task-modal">
                            <img src="http://www.qlcoder.com/uploads/145059173416304.png">
                        </a>
                        <div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
                            <div class="modal-dialog" role="document" style="width:1070px;margin:0 auto;transform: translateY(-50%); top: 50%; position: absolute; left: 50%; margin-left: -535px;z-index: 1041;">
                                <div class="modal-content">

                                    <div class="modal-body" style="padding:0;">
                                        <img src="http://www.qlcoder.com/uploads/145059173416304.png" style="display: block;margin: 0 auto;width:95%;">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="taskwriter-apart bor_b">
                        <div class="task-writer-h2 mt30 mb10">扫地机器人-排行榜</div>
                        <div class="rank-wrap">
                            <div class="rank-task-item">
                                <div class="tag rank-level">1</div>
                                <div class="tag rank-name overhidden">alsdhlashdkja</div>
                                <div class="tag rank-type">999关啊</div>
                                <div class="tag rank-score">1000分</div>
                            </div>
                            <div class="rank-task-item">
                                <div class="tag rank-level">1</div>
                                <div class="tag rank-name overhidden">alsdhlashdkja</div>
                                <div class="tag rank-type">999关啊</div>
                                <div class="tag rank-score">1000分</div>
                            </div>
                            <div class="rank-task-item">
                                <div class="tag rank-level">1</div>
                                <div class="tag rank-name overhidden">alsdhlashdkja</div>
                                <div class="tag rank-type">999关啊</div>
                                <div class="tag rank-score">1000分</div>
                            </div>

                        </div>
                    </div>
                    <div class="task-writer-footer mt20">
                        <a href="" class="primary">撰写学习资料</a>
                        <span class="vertical"></span>
                        <a href="" class="primary">查看讨论区</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- contain e -->
    <div style="height: 60px;"></div>
</div>
<footer>©2016 千里码 浙ICP备15038807号-1 联系我们:oreo@qlcoder.com</footer>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://www.qlcoder.com/js/editormd.js?v=1.0"></script>
<script src="js/bootstrap-paginator.min.js"></script>
<script src="js/common.js"></script>
<script>
    $(function(){
        QL.namespace('QL.even.popover')($('.qlUser'));
        $(".comment-main .edit").focus(function(){
            $(this).removeClass("empty").next().removeClass("none");
        }).blur(function(){
            if($(this).html()==""){
                $(this).addClass("empty");
            }
        });
        $(".comment-main .cancel").click(function(){
           $(this).parent().addClass("none").parent(".comment-main").find(".edit").addClass("empty");
        });
        $(".commentOtherBtn").click(function () {
            $(this).parents(".comment-body").find(".comment-main").toggleClass("none");
        })
    });

</script>
</body>
</html>